<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="团队业绩" name="team">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"label-width="68px" class="main-search">
          <el-form-item>
            <el-radio-group v-model="queryParams.type" @input="getTeamRevenueList">
              <el-radio-button label="4" border size="medium">当月数据</el-radio-button>
              <el-radio-button label="5" border size="medium">上月数据</el-radio-button>
            </el-radio-group>
          </el-form-item>
<!--          <el-form-item>-->
<!--            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--          </el-form-item>-->
        </el-form>
        <el-row>

        </el-row>
        <el-table :data="teamList" size="small">
          <el-table-column label="排名" type="index" width="50" align="center"/>
          <el-table-column label="所属部门" align="center" prop="deptName" show-overflow-tooltip/>
          <el-table-column label="创收" align="center" prop="revenue" show-overflow-tooltip/>
          <el-table-column label="人均创收" align="center" prop="revenueRj" show-overflow-tooltip/>
          <el-table-column label="今日创收" align="center" prop="revenueDr"/>
          <el-table-column label="进件件数" align="center" prop="jjNum"/>
          <el-table-column label="创收件数" align="center" prop="revenueNum" show-overflow-tooltip/>
          <el-table-column label="平均点位" align="center" prop="feerate" show-overflow-tooltip/>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="个人业绩" name="user">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item>
            <el-radio-group v-model="queryParams.type" @input="getUserRevenueList">
              <el-radio-button label="4" border size="medium">当月数据</el-radio-button>
              <el-radio-button label="5" border size="medium">上月数据</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-table :data="userList" size="mini">
          <el-table-column label="排名" type="index" width="50" align="center"/>
          <el-table-column label="贷款顾问" align="center" prop="nickName" show-overflow-tooltip/>
          <el-table-column label="所属部门" align="center" prop="deptName" show-overflow-tooltip/>
          <el-table-column label="创收" align="center" prop="revenue" show-overflow-tooltip/>
          <el-table-column label="今日创收" align="center" prop="revenueDr"/>
          <el-table-column label="进件件数" align="center" prop="jjNum"/>
          <el-table-column label="创收件数" align="center" prop="revenueNum" show-overflow-tooltip/>
          <el-table-column label="平均点位" align="center" prop="feerate" show-overflow-tooltip/>
        </el-table>
      </el-tab-pane>
    </el-tabs>



  </div>
</template>

<script>

import {selectTeamRevenueList, selectUserRevenueList} from "@/api/statistics/statistics";

export default {
  name: "ChannelInfo",
  dicts: ['sys_status'],
  data() {
    return {
      activeName: 'team',
      teamList: [],
      userList: [],
      // 查询参数
      queryParams: {
        type: '4'
      },
    };
  },
  created() {
    this.handleClick({index: 0, name: 'team'});
  },
  methods: {
    /** 切换时间 */
    handleClick(tab, event) {
      console.log(tab.index, tab.name);
      this.resetQuery()
      if(tab.name === 'team'){
        this.getTeamRevenueList();
      }else if(tab.name === 'user'){
        this.getUserRevenueList();
      }
    },
    getTeamRevenueList(){
      console.log(this.queryParams)
      selectTeamRevenueList(this.queryParams).then(response => {
        this.teamList = response.data;
      });
    },
    getUserRevenueList(){
      selectUserRevenueList(this.queryParams).then(response => {
        this.userList = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
    },
    /** 重置按钮操作 */
    resetQuery() {
      this. queryParams= {
        type: '4'
      }
    },

  }
};
</script>
